<template>
  <div class="lineItem">
    <div class="lineItem-header">
      <div class="lineItem-header-left">
        <div>
          <img src="/images/personalCenter/notPay.png" alt="">
        </div>
        <div>
          <h3>{{ data.line.status===2?'待发货':data.line.status===1?'待付款':'已取消' }}</h3>
          <span>订单编号： {{data.line.orderNumber}}</span>
        </div>
      </div>
      <div class="lineItem-header-right">
        <div>
          <h3>￥{{data.line.allMoney}}</h3>
        </div>
        <div v-if="data.line.status===1">
          <el-button @click="deactivePayment">取消支付</el-button>
          <el-button @click="confirmPayment">立即支付</el-button>
        </div>
        <div v-else-if="data.line.status===2">
          <el-button @click="remind" style="margin: 0">提醒发货</el-button>
        </div>
        <div v-else-if="data.line.status===4">
<!--          <el-button @click="remind" style="margin: 0">提醒发货</el-button>-->
        </div>
      </div>
    </div>
    <div class="lineItem-main">
      <!--收件人-->
      <div class="recipients">
        <div class="recipients-left">
          <p>收货信息</p>
        </div>
        <div class="recipients-right">
          <ul>
            <li>
              <span>收件人：</span>
              <span>{{data.line.address.name}}</span>
              <span v-if="data.line.status===1"><el-icon @click="open"><Edit /></el-icon></span>
            </li>
            <li>
              <span>联系电话：</span><span>{{data.line.address.phone}}</span>
            </li>
            <li>
              <span>配送地址：</span><span>{{data.line.address.shippingAddress}}</span>
            </li>
          </ul>
        </div>
      </div>
      <!--发票信息-->
      <div class="recipients">
        <div class="recipients-left">
          <p>发票信息</p>
        </div>
        <div class="recipients-right">
          <ul>
            <li>
              <span>发票类型：</span>
              <span>普通发票</span>
            </li>
            <li>
              <span>发票抬头：</span><span>个人</span>
            </li>
          </ul>
        </div>
      </div>
      <!--支付及配送-->
      <div class="recipients">
        <div class="recipients-left">
          <p>支付及配送</p>
        </div>
        <div class="recipients-right">
          <ul>
            <li>
              <span>下单时间：</span>
              <span>{{data.line.orderTime}}</span>
            </li>
            <li>
              <span>支付方式：</span><span>{{data.line.modePayment}}</span>
            </li>
            <li>
              <span>配送方式：</span><span>顺丰速运</span>
            </li>
            <li>
              <span>运费：</span><span>￥0</span>
            </li>
            <li>
              <span>积分：</span><span>0</span>
            </li>
            <li>
              <span>红包：</span><span>0</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="recipients-left recipients-left-shop">
      <p class="recipients-left-last">商品信息</p>
    </div>
    <div v-for="(item,index) in data.line.shop" class="lineItem-footer">
      <div>
        <img :src="item.mainimage" alt="">
      </div>
      <div>
        <p class="commodityFigure-p commodityFigure-fontSize">{{item.title}}</p>
      </div>
      <div>
        <p class="commodityFigure-fontSize">X{{item.quantity}}</p>
      </div>
      <div>
        <p class="commodityFigure-fontSize">￥{{item.price}}</p>
      </div>
    </div>
    <!--删除弹窗-->
    <div class="mask" v-show="data.flag">
      <div class="mask-content">
        <div class="mask-content-body">
          <el-form v-show="data.isRemove===true" :model="form" label-width="120px">
            <div class="close">
              <el-icon @click="close"><Close /></el-icon>
            </div>
            <div>
              <h3>修改地址</h3>
            </div>
            <!--收件人-->
            <div>
              <el-input v-model="form.recipients" maxlength="6" @blur="recipientsBlue" placeholder="收件人" />
              <div v-show="data.recipientsFlag" class="hint">
                <span>{{data.recipientsMsg}}</span>
              </div>
            </div>
            <!--手机号-->
            <div>
              <el-input @blur="phoneBlue" v-model="form.phone" placeholder="手机号" />
              <div v-show="data.phoneFlag" class="hint">
                <span>{{data.phoneMsg}}</span>
              </div>
            </div>
            <!--地址三级联动-->
            <div>
              <div class="personalData-form-inp el-form-item-inp">
                <el-select @change="province" v-model="form.province" placeholder="请选择">
                  <el-option v-for="(item,index) in data.province" :key="item.name" :label="item.name" :value="item.name" />
                </el-select>
                <el-select @change="city" v-model="form.city" placeholder="请选择">
                  <el-option v-for="item in data.city" :key="item.name" :label="item.name" :value="item.name" />
                </el-select>
                <el-select v-model="form.district" placeholder="请选择">
                  <el-option v-for="item in data.district" :label="item" :value="item" />
                </el-select>
              </div>
            </div>
            <!--地址提示-->
            <div>
              <el-input @blur="defaultAddressBlue" v-model.trim="form.defaultAddress" placeholder="详细地址" maxlength="120"
                        @input="btnAH"/>
              <div v-show="data.defaultAddressFlag" class="hint">
                <span>{{ data.defaultAddressMsg }}</span>
              </div>
            </div>
            <!--确定-->
            <div class="confirm">
              <el-button :plain="true" @click="onSubmit">确定</el-button>
            </div>
          </el-form>
          <div v-show="data.isRemove===false" class="rem">
            <h3>确定要取消该订单吗</h3>
            <div>
              <el-button @click="enThink">再想想</el-button>
              <el-button @click="enRemove">确定</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
//引入vue
import {reactive,onMounted,getCurrentInstance} from "vue";
//引入vue-router
import {useRoute,useRouter} from 'vue-router'
import {ElMessage} from "element-plus";
import store from "../../../store";
//route
const route = useRoute();
//router
const router = useRouter();
//proxy
const {proxy} = getCurrentInstance();
//
let form = reactive({
  recipients:'',
  phone:'',
  province:'',
  city:'',
  district:'',
  defaultAddress:''
})
//数据
let data = reactive({
  flag:'',
  //订单详情
  line: {
    address:{}
  },
  orderid:'',
  //收件人
  recipientsFlag:false,
  recipientsMsg:'请输入联系人',
  //手机号
  phoneFlag:false,
  phoneMsg:'请输入手机号',
  //详细地址
  defaultAddressFlag:false,
  defaultAddressMsg:'请输入详细地址',
  i:'',
  modificationFlag:'',
  isRemove:'',
  n:'',
  //三级联动数组
  province : [],
})
// 提醒发货
let remind = ()=>{
  ElMessage({
    message: '已催商家发货',
    type: 'success',
  })
}
//修改地址
let onSubmit = ()=>{
  data.flag = false;
  let code = 'address';
  let address = form;
  //修改
  data.line.address.name = form.recipients;
  data.line.address.phone = form.phone;
  data.line.address.addressProvince = form.province;
  data.line.address.addressCity = form.city;
  data.line.address.addressDistrict = form.district;
  data.line.address.addressDefaultAddress = form.defaultAddress;
  data.line.address.shippingAddress = form.province+form.city+form.district+form.defaultAddress;
  proxy.$get('/api/PersonalCenter/orderDetails',{...address,code})
      .then((date)=>{
        ElMessage({
          message: '修改地址成功',
          type: 'success',
        })
      })
}
//详细地址不能输特殊字符
let btnAH=()=>{
  let AH = /^[\u4E00-\u9FA5|a-zA-Z|0-9]+$/
  if (AH.test(form.defaultAddress)){

  }else{
    form.defaultAddress = form.defaultAddress.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g, "");
    ElMessage({
      message: '当前输入的为特殊字符，不可用',
      type: 'error',
    })
  }
}
//处理时间
let utctobeijing=(utc_datetime) => {
  // 转为正常的时间格式 年-月-日 时:分:秒
  let new_datetime = utc_datetime.split("T")[0] + " " + utc_datetime.split("T")[1].split(".")[0];

  // 处理成为时间戳
  let timestamp = new Date(new_datetime.replace(/-/g, '/')).getTime();
  timestamp = timestamp / 1000;
  // 增加8个小时，北京时间比utc时间多八个时区
  timestamp = timestamp + 8 * 60 * 60;

  // 时间戳转为时间
  let date = new Date(parseInt(timestamp) * 1000);
  let YY = date.getFullYear() + '-';
  let MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
  let DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
  let hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
  let mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
  let ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
  return YY + MM + DD + " " + hh + mm + ss;
}
//挂载后
onMounted(()=>{
  //vuex
  data.province = store.state.province;
  //获取订单页传过来的值
  let orderNumber=route.params.orderNumber;
  if (orderNumber){
    sessionStorage.setItem('orderid',orderNumber);
  }else {
    orderNumber = sessionStorage.getItem('orderid');
  }
  data.orderid = orderNumber;
  //发送get请求
  proxy.$get('/api/PersonalCenter/orderDetails',{orderNumber})
      .then((date)=>{
        date = date[0];
        //赋值
        data.line.status = date.status;
        data.line.orderNumber = date.orderid;
        data.line.allMoney = date.payment;
        data.line.address.name = date.name;
        data.line.address.phone = date.phone;
        data.line.address.addressProvince = date.addressProvince;
        data.line.address.addressCity = date.addressCity;
        data.line.address.addressDistrict = date.addressDistrict;
        data.line.address.addressDefaultAddress = date.addressDefaultAddress;
        data.line.address.shippingAddress = date.addressProvince+date.addressCity+date.addressDistrict+date.addressDefaultAddress;
        // data.line.orderTime = date.paymenttime.slice(0,-5).replace('T',' ');
        data.line.orderTime = utctobeijing(date.paymenttime);
        console.log(data.line.orderTime);
        data.line.modePayment = date.paymenttype;
        data.line.shop = JSON.parse(date.products);
      })
})
//取消支付
let deactivePayment = ()=>{
  data.isRemove = false;
  data.flag = true;
}
//确定支付
let confirmPayment = ()=>{
  router.push('/cart/affirm');
}
//再想想
let enThink = ()=>{
  data.flag = false;
}
//确定删除
let enRemove = () =>{
  //发送请求删除
  proxy.$get('/api/PersonalCenter/order',{orderid:data.orderid,code:'cancel'})
      .then((date)=>{
        ElMessage({
          message: '已取消该订单',
          type: 'success',
        })
        router.push('/personalCenter/myOrder')
      })
}
//收件人失去焦点
let recipientsBlue = ()=>{
  if (form.recipients===''){
    data.recipientsFlag = true;
  }else {
    data.recipientsFlag = false;
  }
}
//手机号失去焦点
let phoneBlue = ()=>{
  console.log(form.phone);
  if (form.phone===''){
    data.phoneMsg = '请输入手机号';
    data.phoneFlag = true;
  }else if (/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/ig.test(form.phone)){
    data.phoneFlag = false;
  }else if (/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/ig.test(form.phone)===false){
    data.phoneMsg = '请输入正确的手机号格式';
    data.phoneFlag = true;
  }
}
//地址三级联动
let province = ()=>{
  let i = data.province.findIndex((item,index)=>{
    return item.name === form.province
  })
  data.provinceIndex = i;
  data.city=data.province[data.provinceIndex].city;
  form.city='';
  form.district = '';
}
//城市
let city = ()=>{
  let i = data.city.findIndex((item,index)=>{
    return item.name === form.city
  })
  data.cityIndex = i;
  data.district = data.city[data.cityIndex].districtAndCounty;
  form.district = '';
}
//地址
//详细地址
let defaultAddressBlue = ()=>{
  if (form.defaultAddress===''){
    data.defaultAddressFlag=true;
  }else {
    data.defaultAddressFlag=false;
  }
}
//打开添加地址
let open = ()=>{
  data.flag = true;
  data.isRemove = true;
  let address = data.line.address;
  form.recipients = address.name;
  form.phone = address.phone;
  form.province = address.addressProvince;
  form.city = address.addressCity;
  form.district = address.addressDistrict;
  form.defaultAddress = address.addressDefaultAddress;
  //
  let p = data.province.findIndex((item,index)=>{
    return item.name === form.province;
  })
  data.provinceIndex = p;
  data.city=data.province[data.provinceIndex].city;
  //
  let c = data.city.findIndex((item,index)=>{
    return item.name === form.city;
  })
  data.cityIndex = c;
  data.district = data.city[data.cityIndex].districtAndCounty;
}
//关闭添加地址
let close = ()=>{
  data.flag = false;
  data.phoneFlag = false;
  data.recipientsFlag = false;
  data.defaultAddressFlag = false;
  data.modificationFlag = '';
  form.recipients = '';
  form.phone = '';
  form.defaultAddress = '';
  form.tacitlyApprove = '';
  form.province = '';
  form.city = '';
  form.district = '';
}
</script>

<style lang="less" scoped>
  .lineItem {
    box-sizing: border-box;
    position: relative;
    padding: 35px 50px;
    min-height: 100%;
    box-shadow: 0 0 10px 0 #eaeaea;
    .recipients-left-last {
      font-size: 18px;
      font-weight: 400;
      color: #000;
    }
    .mask {
      width: 100%;
      height: 100%;
      position: fixed;
      left: 0;
      top: 0;
      background: rgba(0,0,0,.6);
      z-index: 999;
      //display: none;
      .mask-flag {
        //min-width: 440px!important;
      }
      .mask-content {
        max-width: 680px;
        min-width: 380px;
        padding: 40px 65px;
        position: absolute;
        left: 50%;
        top: 50%;
        background: #fff;
        border-radius: 2px;
        transform: translate(-50%,-50%);
        text-align: center;
        .mask-content-body {
          width: 100%;
          background: #fff;
          border-radius: 2px;
          text-align: center;
          font-size: 14px;
          .el-form {
            min-width: 530px;
          }
          .rem {
            box-sizing: border-box;
            //min-width: 440px;
            h3 {
              line-height: 24px;
              font-size: 18px;
              color: #303133;
            }
            div {
              display: flex;
              justify-content: space-between;
              .el-button {
                width: 164px;
                height: 40px;
              }
            }
          }
          div {
            position: relative;
            margin: 10px 0;
            .el-input {
              height: 50px;
            }
            h3 {
              padding: 0;
              margin-bottom: 40px;
              font-size: 22px;
            }
            .personalData-form-inp {
              .el-input {
                height: 50px;
              }
              input {
                width: 100%;
                height: 50px;
                padding: 0 25px;
                box-sizing: border-box;
                background-color: #fff;
                border-radius: 4px;
                border: 1px solid #dcdfe6;
              }
              .el-select {
                width: 165px;
                /deep/ .el-input__inner {
                  height: 50px;
                }
              }
            }
            .el-form-item-inp {
              display: flex;
              justify-content: space-between;
            }
          }
          .hint {
            position: absolute;
            bottom: -20px;
            span {
              text-align: left;
              color: red;
              font-size: 12px;
            }
          }
          .confirm {
            display: flex;
            justify-content: start;
            /deep/ .el-button {
              width: 100%;
              height: 50px;
            }
          }
          .close {
            /deep/ .el-icon {
              position: absolute;
              right: -42px;
              top: -36px;
              font-size: 34px;
              color: #909399;
              cursor: pointer;
            }
          }
          .default {
            display: flex;
            justify-content: start;
          }
          .example-block {
            display: flex;
            justify-content: start;
            /deep/ .el-cascader {
              width: 100%;
              /deep/ input {
                height: 50px;
              }
            }
          }
        }
      }
    }
    .recipients-left {
      width: 127px;
      font-size: 16px;
    }
    .recipients-left-shop{
      margin-top: 39px;
    }
    .lineItem-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 43px;
      border-bottom: 1px solid #ececec;
      .lineItem-header-left {
        display: flex;
        align-items: center;
        div {
          img {
            width: 88px;
            height: 88px;
          }
          h3 {
            font-size: 18px;
            color: #000;
            margin-bottom: 19px;
          }
          span {
            font-size: 14px;
            color: #999;
          }
        }
        div:last-child {
          margin-left: 37px;
        }
      }
      .lineItem-header-right {
        div {
          h3 {
            margin-left: 10px;
            font-size: 22px;
            color: #0096d6;
            text-align: right;
          }
        }
        div:last-child {
          display: flex;
          margin-top: 19px;
          .el-button {
            font-size: 14px;
            padding: 17px 32px;
            line-height: 0px;
          }
        }
      }
    }
    .lineItem-main {
      margin-top: 39px;
      >div {
        margin-top: 39px;
      }
      >div:first-child {
        margin-top: 0;
      }
      .recipients {
        display: flex;
        .recipients-right {
          font-size: 14px;
          color: #666;
          padding-top: 1px;
          ul {
            li {
              margin-top: 26px;
              /deep/ .el-icon {
                position: relative;
                cursor: pointer;
                top: 3px;
                margin-left: 23px;
                font-size: 16px;
              }
            }
            li:first-child {
              width: 400px;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              margin-top: 0px;
            }
          }
        }
      }
    }
    .lineItem-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30px 0;
      border-top: 1px solid #e0e0e0;
      margin-top: 46px;
      div {
        img {
          width: 74px;
          height: 80px;
          margin-left: 26px;
        }
        .commodityFigure-p {
          width: 212px;
        }
        .commodityFigure-fontSize {
          font-size: 16px;
        }
      }
    }
  }
</style>